import { Component, OnInit, ChangeDetectionStrategy, ViewChild, ElementRef, AfterViewInit, Renderer2, Input, Injector } from '@angular/core';
import { Addon, Cell, Graph, Shape } from '@antv/x6';
import { uuid } from '@antv/x6/lib/util/string/uuid';
import { SHAPE_TYPE } from '../shared/enum';

import { GraphService } from '../util/graph.service';

@Component({
  selector: 'app-tool-list',
  templateUrl: './tool-list.component.html',
  styleUrls: ['./tool-list.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToolListComponent implements OnInit {
  graph!: Graph;
  dnd!: Addon.Dnd;

  picUrl = 'https://winkong-frontend.oss-cn-qingdao.aliyuncs.com/images/wk-marinsmart-ui/home/home-1.jpg';

  constructor(
    private graphService: GraphService,
  ) {
    this.graphService.graph$.subscribe((graph: Graph | undefined) => {
      if (graph) {
        this.graph = graph;
      }
    });
  }

  ngOnInit(): void {
    this.dnd = new Addon.Dnd({
      target: this.graph,
    });
  }

  startDrag(e: MouseEvent): void {
    const target = e.currentTarget as HTMLElement;
    const type = target.getAttribute('templateType');
    console.log(type);

    let node = undefined;
    switch (type) {
      case '1':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.TEXT,
          ports: [
            {
              group: 'out',
              attrs: {
                text: { text: '下一步' },
              }
            },
          ]
        });
        break;
      case '2':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.IMAGE,
        });
        break;
      case '3':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.IMAGE_TEXT_V1,
        });
        break;
      case '4':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.IMAGE_TEXT_V2,
        });
        break;
      case '5':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.ERROR,
        });
        break;
      case '6':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.WARNING,
        });
        break;
      case '7':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.QUESTION,
        });
        break;
      case '8':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.INFO,
        });
        break;
      case '9':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.SUCCESS,
        });
        break;
      case '10':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.IMAGE_TASK,
        });
        break;
      case '11':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.MEDIA_VIEW,
        });
        break;
      case '12':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.MEDIA_VIEW_NO_CONTROL,
        });
        break;
      case '13':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.MEDIA_TEXT,
        });
        break;
      case '14':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.MEDIA_TEXT_NO_CONTROL,
        });
        break;
      case '15':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.SCREEN,
        });
        break;
      case '16':
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.RECORD,
        });
        break;
      case '17':
        node = this.graph.createNode({
          data: {

          },
          shape: SHAPE_TYPE.SCAN,
        });
        break;
      default:
        node = this.graph.createNode({
          data: {
            btnList: [
              { value: '返回', sort: 1, id: uuid() },
              { value: '继续', sort: 2, id: uuid() },
            ]
          },
          shape: SHAPE_TYPE.TEXT,
        });
        break;
    }

    this.dnd.start(node, e);
  }

}
